<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.5.22 (466990)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2017-11-24 02:18:55 +0000"/><meta name="source" content="desktop.mac"/><meta name="source-url" content="https://blog.csdn.net/j_156310842/article/details/80981591"/><meta name="updated" content="2022-05-27 17:46:09 +0000"/><title>DAY33：Gulp</title></head><body><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">一、Gulp介绍：</span></span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    gulp是一种基于NodeJs的前端自动化工具，用来增强工作流程</span><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">。</span></div><div><span style="font-size: 14px;"><br/></span></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    类似前端工程化工具还有：</span><span style="font-size: 14px;"><span style="font-size: 14px; color: rgb(227, 0, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">webpack，grunt，browserify</span></span></div><div><span style="font-size: 12px;"><br/></span></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    在使用gulp之前需要先安装gulp，</span><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">安装gulp有两种方式：</span></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    一种是通过下载软件安装</span></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    一种是通过类似手机的应用商店的软件下载，而node就是这个应用商店</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    直接在网页上下载安装不仅安全性无法保证，而且还会造成不兼容等问题；</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    通过手机的应用商店下载的软件会自动适配当前手机的型号和cpu等信息，既保证了安全，也保证的软件的功能完整性</span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">二、gulp的安装和使用</span></span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><font style="font-size: 18px;"><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">安装：</span></font></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="font-size:12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">1.gulp的全局环境类似于下载器，在使用gulp之前需要先安装环境</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    npm i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">nstall gulp -g</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    下载完成之后执行</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    gulp -v</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    查看gulp的版本，安装完成</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    2.创建一个文件夹，起个任意名字，从命令行中进入当前文件夹</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        执行npm install gulp --save-dev</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        配置局部环境</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        下载完成后执行gulp -v</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        会出现全局和局部的版本号</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    3.执行npm init</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        设置配置信息，可以全部为默认（gulp项目的名称不允许为`gulp`）</span></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">使用：</span></font></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    1.在命令行中输入gulp，提示没有gulpfile文件，需要手动创建固定文件名gulpfile.js文件</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        在该文件中引入gulp模块，let gulp = require("gulp</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">");</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><br/></span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    2.gulp为gulp模块返回的对象，在这个对象中，有一些方法</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                </span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco;">        src(路径)                 用来查找指定文件</span></font></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco;">        d</span><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco;">est(路径)                用来转存到指定目录</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco;">        w</span><span style="background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco;">atch(路径,函数)           用来开启监听</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco;">        series(函数1,函数2,…)      按顺序执行</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco;">        parallel(函数1,函数2,…)    同时执行</span></span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco;">        pipe()                    管道方法，用来连接下一个文件操作方法</span></span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><br/></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        实现功能将开发环境中的文件放在线上环境中（文件转存）</span></div><div><span style="font-family: Monaco;">        fu</span><span style="font-size: 14px; font-family: Monaco;">nction indexFn</span><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">{</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(165, 178, 185); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">            //实现功能的时候，要使用ruturn返回文件流</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">            return</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">gulp.src(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">"index.html"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">).pipe(gulp.dest(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">"dist"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">));</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">        }</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(165, 178, 185); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">        //将方法暴露给node，在命令行工具中使用`gulp indexFn`执行</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">        exports.index = indexFn;</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    3.监控</span></span></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">gulp.watch()</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        监听index.html文件当发生改变时，执行指定函数（文件改变，自动执行）</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><font face="Monaco" style="font-size: 14px;"><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">        function watchFn(){</span></font></span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(105, 137, 6); font-variant-caps: normal; font-variant-ligatures: normal;">            return </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">gulp.watch("</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(40, 156, 151); font-variant-caps: normal; font-variant-ligatures: normal;">index.html",indexFn</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">)</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><font face="Monaco" style="font-size: 14px;"><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">        }</span></font></span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">        exports.watch = watchFn;</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><br/></span></font></div><div><span style="background-color: rgb(251, 250, 248);"><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">    4.批量执行</span></font></span></div><div><span style="color: rgb(51, 51, 51); font-family: Monaco;">        f</span><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">unction fn1(cb){</span></div><div><span style="color: rgb(51, 51, 51); font-family: Monaco;">            console.log("hello gulp 1");</span></div><div><span style="color: rgb(51, 51, 51); font-family: Monaco;">            cb();</span></div><div><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">        }</span></div><div><span style="color: rgb(51, 51, 51); font-family: Monaco;">        f</span><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">unction fn2(cb){</span></div><div><span style="color: rgb(51, 51, 51); font-family: Monaco;">            console.log("hello gulp 2");</span></div><div><span style="color: rgb(51, 51, 51); font-family: Monaco;">            cb();</span></div><div><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">        }</span></div><div><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">        exports.all = gulp.series(fn1,fn2);    //顺序执行</span></div><div><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">        exports.all2 = gulp.parallel(fn1,fn2)  //同时执行</span></div></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">文件转存时的多种路径写法</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    1.拷贝多种后缀名</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">gulp.src("images/*.{jpg,png}")</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        </span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    2.如果要拷贝文件夹下所有内容</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">gulp.src("images/*/*")</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        如果要拷贝所有的话， 可以使用</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">images/**/*</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">去表示当前images文件夹下所有的内容全部进行拷贝。 </span></div><div style="font-size: 14px;"><br style="color: rgb(51, 51, 51);"/></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    3.将两个文件夹拷贝到同一个目标文件夹下</span></div><div style="font-size: 14px;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        </span><span style="font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">gulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data</span><span style="font-size: 14px; caret-color: rgb(51, 51, 51); color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">’</span><span style="font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">))</span></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    4.排除 !</span></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        </span><span style="color: rgb(255, 38, 0); font-family: Monaco;">gulp.src(['xml/*.xml','json/*.json','</span><span style="font-size: 14pt; color: rgb(255, 38, 0); font-family: Monaco; font-weight: bold;">!</span><span style="color: rgb(255, 38, 0); font-family: Monaco;">json/secret.json']).pipe(gulp.dest('dist/data'))</span></div></div><div><span style="font-size: 18px;"><br/></span></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">三、gulp插件（服务器插件）创建本地服务</span></span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    1.安装插件（插件只有局部，没有全局，所以要安装在项目文件夹中）</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        npm install gulp-connect</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    2.引入插件</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        在gulpfile文件中引用：</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        let connect = require("gulp-connect");</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    3.配置gulp-connect</span></span></div><div><span style="font-family: Monaco;">        function serverFn(){</span></div><div><span style="font-family: Monaco;">            connect.server({</span></div><div><span style="font-family: Monaco;">                root:"server",     //以哪个文件夹为服务器</span></div><div><span style="font-family: Monaco;">                port:8888,       //端口号</span></div><div><span style="font-family: Monaco;">                livereload:true  //是否可以自动刷新</span></div><div><span style="font-family: Monaco;">            })</span></div><div><span style="font-family: Monaco;">        }</span></div><div><span style="font-family: Monaco;">      </span> <span style="font-size: 14px; font-family: Monaco;"> exports.server = serverFn;</span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 0); font-family: Monaco;">    4.此</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 0); font-family: Monaco;">时可以在浏览器中输入本地地址，访问服务器</span></font></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 0); font-family: Monaco;">        如果要实现保存自动刷新功能，首先需要在index指令中调用connect插件</span></span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">            </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">gulp.src(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">"index.html"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">).pipe(gulp.dest(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; font-variant-caps: normal; font-variant-ligatures: normal;">"dist</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">))<span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(255, 38, 0);">.pipe(connect.reload());</span></span></font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco;">       </span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">其次需要同时运行服务器指令和监测指令，可通过批量执行方法实现</span></div><div><span style="color: rgb(255, 38, 0); font-family: Monaco;">            exports.autoRef = gulp.parallel(serverFn,watchFn);</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">            表示先打开server，再打开watch，就可以进行实时监测，实现本地修改保存，服务器自动修改</span></span></span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    5.服务器代理（解决跨域问题）</span></span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">       </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;" /><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">5-1.安装http-proxy-middleware插件(gulp代理中间件插件)</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">            </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">npm install <span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">http-proxy-middleware</span></span></font></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">        5-</span></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">2.引入插件</span></font></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">            let proxy = require('</span><span style="caret-color: rgb(51, 51, 51);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">http-proxy-middleware'</span></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">);</span></span></span></font></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        5-3.开启服务</span></span></span></span></span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(198, 120, 221); font-family: Monaco;">function</span><span style="font-size: 14px; font-family: Monaco;"> serverFn</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">()</span><span style="font-size: 14px; font-family: Monaco;" /><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">{</span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                connect.server({</span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">                    </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(209, 154, 102);">root</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">: 'src',</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">                    </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(209, 154, 102);">port</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">: 8888,</span></font></div><div><span style="font-size: 14px; font-family: Monaco;">                    </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(209, 154, 102); font-family: Monaco;">livereload</span><span style="font-size: 14px; font-family: Monaco;">: true,</span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                    </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(209, 154, 102); font-family: Monaco;">middleware</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">:</span><span style="font-size: 14px; font-family: Monaco;" /><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(198, 120, 221); font-family: Monaco;">function</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">(</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">connect, opt</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">)</span><span style="font-size: 14px; font-family: Monaco;" /><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">{</span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                        </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(198, 120, 221); font-family: Monaco;">return</span><span style="font-size: 14px; font-family: Monaco;" /><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">[</span></div><div><font face="Monaco" style="font-size: 14px;"><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">                            </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">proxy.</span><span style="white-space: pre;"><span style="font-size: 14px; font-family: Monaco; line-height: 30px;">createProxyMiddleware</span></span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">(</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(152, 195, 121);">'</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(152, 195, 121);">/api'</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">,  {</span></font></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                               </span><span style="font-size: 14px; font-family: Monaco;" /><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco;">target</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco;">:</span><span style="font-size: 14px; font-family: Monaco;" /><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco;">'</span><a href="https://wanandroid.com/wxarticle" style="font-size: 14px; font-family: Monaco;">https://wanandroid.com/wxarticle</a><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco;">'</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">,    </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; color: rgb(146, 146, 146); font-family: Monaco;">//代理的目标地址</span></div><div><font face="Monaco" style="font-size: 14px;"><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">                                changeOrigin:</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(86, 182, 194);">true,</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">                                pathRewrite:{    </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(146, 146, 146);">//路径重写规则</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">                                    </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(152, 195, 121);">'^/api'</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">:</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(152, 195, 121);">''</span></font></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                                }</span></span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                            })</span></span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                        ]</span></span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                    }</span></span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                });</span></span></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            };</span></span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        说明：proxy()参数解释</span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">            </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(152, 195, 121);">'/api'</span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">      =&gt; 匹配你要代理的请求地址前缀</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">            <span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(209, 154, 102);">target</span></span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">      =&gt; 你要把请求代理到哪</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">            </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">pathRewrite</span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);"> =&gt; 是把在页面中写的请求地址的某部分的重写为后面的字符串</span></font></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            </span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="font-size: 14px; font-family: Monaco;">        此时页面中请求的写法：</span></div><div><font face="Monaco" style="font-size: 14px;"><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">            $.post(</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(152, 195, 121);">'/api</span><span style="font-size: 14px; font-family: Monaco; color: rgb(152, 195, 121);">/chapters/json</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(152, 195, 121);">'</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">,</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(198, 120, 221);">function</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">(</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">data</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">)</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">{</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">                </span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco; color: rgb(230, 192, 123);">console</span><span style="box-sizing: border-box; border-radius: 0px; white-space: pre; border: none; vertical-align: middle; font-size: 14px; font-family: Monaco;">.log(data);</span></font></div><div><span style="box-sizing: border-box; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; white-space: pre; border: none; vertical-align: middle;"><span style="font-size: 14px; font-family: Monaco;">            })</span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">    </span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">    </span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">    </span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">// </span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">也就是发往 /api/</span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">chapters/json</span><span style="font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">的请求最终会被发往</span></font></div><div><span style="font-size: 14px; font-family: Monaco;">            // </span><a href="https://wanandroid.com/wxarticle/chapters/json" style="font-size: 14px; font-family: Monaco;">https://wanandroid.com/wxarticle/chapters/json</a></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">四、扩展练习：</span></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">gulp插件</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    插件官网</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        </span><a href="http://gulpjs.com/plugins/" style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">http://gulpjs.com/plugins/</a></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    将插件安装到本地之后， 要require引入之后才可以正常使用</span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">ES6转ES5 gulp-babel</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><font face="Monaco" style="font-size: 14px;">babel是一个JavaScript编译器，主要用于将ES5+的版本，转换成向后兼容的ES版本。</font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="color: rgb(51, 51, 51);"><font face="Monaco" style="font-size: 14px;">    而gulp仅仅是提供了支持babel的插件而已，所以在下载了gulp对babel的支持后：</font></span></div><div><font style="font-size: 14px; font-family: Monaco;">    npm install gulp-babel</font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><font face="Monaco" style="font-size: 14px;">    还需要下载babel的其他套件：</font></div><div><font style="font-size: 14px; font-family: Monaco;">    npm install @babel/core</font></div><div><font style="font-size: 14px; font-family: Monaco;">    npm install @babel/preset-env</font></div><div><br/></div><div><font face="Monaco" style="font-size: 14px;">    但是在gulp的配置文件中，只需要引入gulp-babel即可：</font></div><div><font face="Monaco" style="font-size: 14px;">    let babel = require("gulp-babel");</font></div><div><br/></div><div><font face="Monaco" style="font-size: 14px;">    function sTf(){</font></div><div><font face="Monaco" style="font-size: 14px;">        return gulp.src("src/js/*.js”)</font></div><div><font face="Monaco" style="font-size: 14px;">                   .pipe(babel({</font></div><div><font face="Monaco" style="font-size: 14px;">                       presets: ['@babel/env']</font></div><div><font face="Monaco" style="font-size: 14px;">                   }))</font></div><div><font face="Monaco" style="font-size: 14px;">                   .pipe(gulp.dest("server/js"))</font></div><div><font face="Monaco" style="font-size: 14px;">    }</font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><font face="Monaco" style="font-size: 14px;">    exports.sTf = sTf;</font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">合并插件 gulp-concat</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">用于合并js文件</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    f</span><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">unction </span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">cf(){</span></span></div><div><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        return gulp.src(['js/nav.js','js/banner.js</span><span style="background-color: rgb(251, 250, 248); caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">’</span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">])</span></div><div><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(babel())</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(concat('index.js'))</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(gulp.dest('dist/js'))</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    e</span><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">xports.cf = cf;</span></div></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">代码压缩插件 gulp-</span><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">uglify</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"> uf</span></span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">(){</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        return gulp.src(['js/nav.js','js/banner.js’])</span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">                   </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">.pipe(babel())</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                  </span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">.pipe(concat('index.js'))</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(uglify())</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(gulp.dest('dist/js'))</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    exports.</span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">uf = uf;</span></span></div><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51);"/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    我们是否可以保存两份js文件，一份已经压缩，另一份没有压缩的那？</span></div></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">重命名</span><span style="font-weight: bold;" /><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">gulp-re</span><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">name插件</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    f</span><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">unction</span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> rf(){</span></span></div><div><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        return gulp.src(['js/nav.js','js/banner.js</span><span style="background-color: rgb(251, 250, 248); caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">’</span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">])</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                   </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">.pipe(babel())</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(concat('index.js'))</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(gulp.dest('dist/js'))</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(uglify())</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(rename('index.min.js'))</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                   .pipe(gulp.dest('dist/js'))</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span></span><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">exports.rf = rf;</span></div><div style="font-size: 12px;"><br/></div></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">css压缩 </span></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">图片压缩</span></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Courier New&quot;; font-weight: bold;">拓展：sass的编译</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    1.安装插件</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: unset; color: unset; font-family: &quot;Courier New&quot;;">        npm install sass gulp-sass —save-dev </span></div><div style="background-color: rgb(251, 250, 248);"><br/></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    2.引入插件模块</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: &quot;Courier New&quot;;">        const sass = require('gulp-sass')(require('sass'));</span></div><div style="background-color: rgb(251, 250, 248);"><br/></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    3.定义指令</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">        function sassFn(){</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">            </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">return gulp.src('sass/*.scss')</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: &quot;Courier New&quot;;">                       .pipe(sass().on('error',sass.logErstyror))</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">                       </span><span style="background-color: rgb(251, 250, 248); font-family: &quot;Courier New&quot;;">.pipe(gulp.dest('css'));</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">        }</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">        exports.sass = sassFn;</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    </span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    4.监听文件更改</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">        function watchFn(){</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: &quot;Courier New&quot;;">            gulp.watch('sass/*.scss',['sass'])</span></div><div style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">        }</span></div><div style="background-color: rgb(251, 250, 248);"/></div><div><br/></div><div><br/></div><div><br/></div></body></html>